<template>
  <div class="min-h-screen bg-gray-50 p-6">
    <!-- 页面头部 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">通知公告</h1>
          <p class="mt-1 text-sm text-gray-600">发布和管理学校通知公告、重要信息等</p>
        </div>
        <div class="flex items-center gap-3">
          <button
            @click="handleAdd"
            class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
          >
            <PlusIcon class="w-4 h-4 mr-2" />
            发布通知
          </button>
          <button
            @click="handleRefresh"
            class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
          >
            <ArrowPathIcon class="w-4 h-4 mr-2" />
            刷新
          </button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <DocumentTextIcon class="h-8 w-8 text-blue-600" />
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">总通知数</p>
            <p class="text-2xl font-semibold text-gray-900">{{ totalNotices }}</p>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <CheckCircleIcon class="h-8 w-8 text-green-600" />
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">已发布</p>
            <p class="text-2xl font-semibold text-gray-900">{{ publishedNotices }}</p>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <ClockIcon class="h-8 w-8 text-yellow-600" />
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">草稿</p>
            <p class="text-2xl font-semibold text-gray-900">{{ draftNotices }}</p>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <EyeIcon class="h-8 w-8 text-purple-600" />
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">总浏览量</p>
            <p class="text-2xl font-semibold text-gray-900">{{ totalViews }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
      <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">标题关键词</label>
          <input
            v-model="searchForm.keyword"
            type="text"
            placeholder="请输入标题关键词"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">通知类型</label>
          <select
            v-model="searchForm.type"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
          >
            <option value="">全部类型</option>
            <option value="重要通知">重要通知</option>
            <option value="学术通知">学术通知</option>
            <option value="生活通知">生活通知</option>
            <option value="招生通知">招生通知</option>
            <option value="就业通知">就业通知</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">发布状态</label>
          <select
            v-model="searchForm.status"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
          >
            <option value="">全部状态</option>
            <option value="已发布">已发布</option>
            <option value="草稿">草稿</option>
            <option value="已下线">已下线</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">发布时间</label>
          <input
            v-model="searchForm.publishDate"
            type="date"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
          />
        </div>
        <div class="flex items-end gap-2">
          <button
            @click="handleSearch"
            class="flex-1 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
          >
            <MagnifyingGlassIcon class="w-4 h-4 mr-2 inline" />
            搜索
          </button>
          <button
            @click="handleReset"
            class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
          >
            重置
          </button>
        </div>
      </div>
    </div>

    <!-- 通知列表 -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
      <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
          <h2 class="text-lg font-medium text-gray-900">通知列表</h2>
          <div class="flex items-center gap-4">
            <span class="text-sm text-gray-500">共 {{ filteredNotices.length }} 条记录</span>
            <div class="flex items-center gap-2">
              <button
                @click="handleBatchPublish"
                :disabled="selectedNotices.length === 0"
                class="px-3 py-1.5 text-sm font-medium text-green-600 bg-green-50 rounded-lg hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <CheckCircleIcon class="w-4 h-4 mr-1 inline" />
                批量发布
              </button>
              <button
                @click="handleBatchDelete"
                :disabled="selectedNotices.length === 0"
                class="px-3 py-1.5 text-sm font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                <TrashIcon class="w-4 h-4 mr-1 inline" />
                批量删除
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left">
                <input
                  type="checkbox"
                  :checked="selectedNotices.length === filteredNotices.length && filteredNotices.length > 0"
                  @change="handleSelectAll"
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布时间</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">浏览量</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布人</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="notice in paginatedNotices" :key="notice.id" class="hover:bg-gray-50">
              <td class="px-6 py-4">
                <input
                  type="checkbox"
                  :value="notice.id"
                  v-model="selectedNotices"
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
              </td>
              <td class="px-6 py-4">
                <div class="flex items-center">
                  <div class="flex-shrink-0">
                    <div class="h-2 w-2 rounded-full" :class="getTypeColor(notice.type)"></div>
                  </div>
                  <div class="ml-3">
                    <div class="text-sm font-medium text-gray-900 max-w-xs truncate" :title="notice.title">
                      {{ notice.title }}
                    </div>
                    <div class="text-sm text-gray-500 max-w-xs truncate" :title="notice.summary">
                      {{ notice.summary }}
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="getTypeClass(notice.type)"
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ notice.type }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span
                  :class="getStatusClass(notice.status)"
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ notice.status }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ notice.publishTime || '-' }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ notice.views }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ notice.publisher }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="flex items-center gap-2">
                  <button
                    @click="handleView(notice)"
                    class="text-blue-600 hover:text-blue-900 transition-colors"
                    title="查看"
                  >
                    <EyeIcon class="w-4 h-4" />
                  </button>
                  <button
                    @click="handleEdit(notice)"
                    class="text-yellow-600 hover:text-yellow-900 transition-colors"
                    title="编辑"
                  >
                    <PencilIcon class="w-4 h-4" />
                  </button>
                  <button
                    v-if="notice.status === '草稿'"
                    @click="handlePublish(notice)"
                    class="text-green-600 hover:text-green-900 transition-colors"
                    title="发布"
                  >
                    <CheckCircleIcon class="w-4 h-4" />
                  </button>
                  <button
                    v-if="notice.status === '已发布'"
                    @click="handleOffline(notice)"
                    class="text-orange-600 hover:text-orange-900 transition-colors"
                    title="下线"
                  >
                    <XCircleIcon class="w-4 h-4" />
                  </button>
                  <button
                    @click="handleDelete(notice)"
                    class="text-red-600 hover:text-red-900 transition-colors"
                    title="删除"
                  >
                    <TrashIcon class="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="px-6 py-4 border-t border-gray-200">
        <div class="flex items-center justify-between">
          <div class="text-sm text-gray-500">
            显示第 {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, filteredNotices.length) }} 条，共 {{ filteredNotices.length }} 条
          </div>
          <div class="flex items-center gap-2">
            <button
              @click="currentPage--"
              :disabled="currentPage === 1"
              class="px-3 py-1 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              上一页
            </button>
            <span class="px-3 py-1 text-sm font-medium text-gray-700">
              {{ currentPage }} / {{ totalPages }}
            </span>
            <button
              @click="currentPage++"
              :disabled="currentPage === totalPages"
              class="px-3 py-1 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增/编辑通知弹窗 -->
    <Dialog :open="showEditModal" @close="showEditModal = false" class="relative z-50">
      <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
      <div class="fixed inset-0 flex items-center justify-center p-4">
        <DialogPanel class="w-full max-w-4xl rounded-lg bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
          <DialogTitle class="text-lg font-medium text-gray-900 mb-4">
            {{ editingNotice?.id ? '编辑通知' : '发布通知' }}
          </DialogTitle>
          
          <form @submit.prevent="handleSubmit" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">通知标题 *</label>
                <input
                  v-model="noticeForm.title"
                  type="text"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  placeholder="请输入通知标题"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">通知类型 *</label>
                <select
                  v-model="noticeForm.type"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                >
                  <option value="">请选择类型</option>
                  <option value="重要通知">重要通知</option>
                  <option value="学术通知">学术通知</option>
                  <option value="生活通知">生活通知</option>
                  <option value="招生通知">招生通知</option>
                  <option value="就业通知">就业通知</option>
                </select>
              </div>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">通知摘要</label>
              <textarea
                v-model="noticeForm.summary"
                rows="2"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                placeholder="请输入通知摘要"
              ></textarea>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">通知内容 *</label>
              <textarea
                v-model="noticeForm.content"
                rows="10"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                placeholder="请输入通知内容"
              ></textarea>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">是否置顶</label>
                <div class="flex items-center">
                  <input
                    v-model="noticeForm.isTop"
                    type="checkbox"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <span class="ml-2 text-sm text-gray-600">置顶显示</span>
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">是否重要</label>
                <div class="flex items-center">
                  <input
                    v-model="noticeForm.isImportant"
                    type="checkbox"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                  />
                  <span class="ml-2 text-sm text-gray-600">重要通知</span>
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">发布状态</label>
                <select
                  v-model="noticeForm.status"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                >
                  <option value="草稿">保存为草稿</option>
                  <option value="已发布">立即发布</option>
                </select>
              </div>
            </div>
            
            <div class="flex justify-end gap-3 pt-4">
              <button
                type="button"
                @click="showEditModal = false"
                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
              >
                取消
              </button>
              <button
                type="submit"
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
              >
                {{ editingNotice?.id ? '更新' : '发布' }}
              </button>
            </div>
          </form>
        </DialogPanel>
      </div>
    </Dialog>

    <!-- 查看通知弹窗 -->
    <Dialog :open="showViewModal" @close="showViewModal = false" class="relative z-50">
      <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
      <div class="fixed inset-0 flex items-center justify-center p-4">
        <DialogPanel class="w-full max-w-3xl rounded-lg bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
          <DialogTitle class="text-lg font-medium text-gray-900 mb-4">
            通知详情
          </DialogTitle>
          
          <div v-if="selectedNotice" class="space-y-4">
            <div class="border-b border-gray-200 pb-4">
              <div class="flex items-center justify-between mb-2">
                <h2 class="text-xl font-semibold text-gray-900">{{ selectedNotice.title }}</h2>
                <span
                  :class="getTypeClass(selectedNotice.type)"
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ selectedNotice.type }}
                </span>
              </div>
              <div class="flex items-center gap-4 text-sm text-gray-500">
                <span>发布人：{{ selectedNotice.publisher }}</span>
                <span>发布时间：{{ selectedNotice.publishTime || '未发布' }}</span>
                <span>浏览量：{{ selectedNotice.views }}</span>
                <span
                  :class="getStatusClass(selectedNotice.status)"
                  class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                >
                  {{ selectedNotice.status }}
                </span>
              </div>
            </div>
            
            <div v-if="selectedNotice.summary" class="bg-blue-50 rounded-lg p-4">
              <h3 class="text-sm font-medium text-blue-900 mb-2">通知摘要</h3>
              <p class="text-sm text-blue-800">{{ selectedNotice.summary }}</p>
            </div>
            
            <div>
              <h3 class="text-sm font-medium text-gray-900 mb-2">通知内容</h3>
              <div class="bg-gray-50 rounded-lg p-4">
                <div class="text-sm text-gray-900 whitespace-pre-wrap">{{ selectedNotice.content }}</div>
              </div>
            </div>
          </div>
          
          <div class="flex justify-end pt-4">
            <button
              @click="showViewModal = false"
              class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
            >
              关闭
            </button>
          </div>
        </DialogPanel>
      </div>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAppStore } from '../../stores/app'
import {
  Dialog,
  DialogPanel,
  DialogTitle
} from '@headlessui/vue'
import {
  PlusIcon,
  ArrowPathIcon,
  DocumentTextIcon,
  CheckCircleIcon,
  ClockIcon,
  EyeIcon,
  MagnifyingGlassIcon,
  TrashIcon,
  PencilIcon,
  XCircleIcon
} from '@heroicons/vue/24/outline'

// 使用stores
const appStore = useAppStore()

// 响应式数据
const searchForm = ref({
  keyword: '',
  type: '',
  status: '',
  publishDate: ''
})

const showEditModal = ref(false)
const showViewModal = ref(false)
const selectedNotices = ref([])
const selectedNotice = ref(null)
const editingNotice = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)

const noticeForm = ref({
  title: '',
  type: '',
  summary: '',
  content: '',
  isTop: false,
  isImportant: false,
  status: '草稿'
})

// 模拟数据
const notices = ref([
  {
    id: 1,
    title: '关于2024年秋季学期开学报到的通知',
    type: '重要通知',
    summary: '请各位新生按时报到，携带相关证件和材料',
    content: '各位2024级新生：\n\n欢迎加入我校大家庭！现将开学报到相关事宜通知如下：\n\n一、报到时间\n2024年9月1日-9月2日，上午8:00-12:00，下午14:00-18:00\n\n二、报到地点\n学校体育馆\n\n三、携带材料\n1. 录取通知书\n2. 身份证原件及复印件\n3. 高考准考证\n4. 户口本复印件\n5. 一寸免冠照片8张\n\n四、注意事项\n1. 请按时报到，如有特殊情况请提前联系学校\n2. 报到当天学校安排接站服务\n3. 住宿用品学校统一配发\n\n联系电话：0571-12345678\n\n学生处\n2024年8月20日',
    status: '已发布',
    publishTime: '2024-08-20 10:00:00',
    views: 1250,
    publisher: '学生处',
    isTop: true,
    isImportant: true
  },
  {
    id: 2,
    title: '关于开展2024年度奖学金评选工作的通知',
    type: '学术通知',
    summary: '启动新学年奖学金评选，请符合条件的学生积极申报',
    content: '各学院、各班级：\n\n为激励学生勤奋学习，现开展2024年度奖学金评选工作。\n\n一、评选类型\n1. 国家奖学金\n2. 国家励志奖学金\n3. 校级奖学金\n\n二、申报条件\n1. 学习成绩优异\n2. 品德良好\n3. 积极参与社会实践\n\n三、申报时间\n2024年9月15日-10月15日\n\n四、申报流程\n1. 个人申请\n2. 班级推荐\n3. 学院审核\n4. 学校评定\n\n请各学院认真组织，确保评选工作公平公正。\n\n教务处\n2024年8月25日',
    status: '已发布',
    publishTime: '2024-08-25 14:30:00',
    views: 890,
    publisher: '教务处',
    isTop: false,
    isImportant: false
  },
  {
    id: 3,
    title: '食堂就餐时间调整通知',
    type: '生活通知',
    summary: '因设备维护，食堂就餐时间临时调整',
    content: '各位师生：\n\n因食堂设备维护需要，就餐时间临时调整如下：\n\n早餐：7:00-9:00\n午餐：11:30-13:30\n晚餐：17:00-19:00\n\n调整时间：8月28日-8月30日\n\n给大家带来不便，敬请谅解！\n\n后勤处\n2024年8月27日',
    status: '已发布',
    publishTime: '2024-08-27 16:45:00',
    views: 456,
    publisher: '后勤处',
    isTop: false,
    isImportant: false
  },
  {
    id: 4,
    title: '2025年研究生招生简章',
    type: '招生通知',
    summary: '2025年研究生招生工作即将启动，欢迎优秀学子报考',
    content: '2025年研究生招生简章\n\n一、招生专业\n计算机科学与技术、软件工程、人工智能等\n\n二、报名时间\n2024年10月10日-10月31日\n\n三、考试时间\n2024年12月23日-12月24日\n\n四、招生计划\n硕士研究生200名，博士研究生50名\n\n详细信息请关注研究生院官网。\n\n研究生院\n2024年8月28日',
    status: '草稿',
    publishTime: null,
    views: 0,
    publisher: '研究生院',
    isTop: false,
    isImportant: false
  },
  {
    id: 5,
    title: '校园网络维护通知',
    type: '生活通知',
    summary: '校园网络将进行例行维护，期间可能影响网络使用',
    content: '各位师生：\n\n为保障校园网络稳定运行，将于本周末进行例行维护。\n\n维护时间：\n2024年8月31日 22:00 - 9月1日 6:00\n\n维护期间可能出现网络中断，请提前做好相关准备。\n\n网络中心\n2024年8月29日',
    status: '已下线',
    publishTime: '2024-08-29 09:00:00',
    views: 234,
    publisher: '网络中心',
    isTop: false,
    isImportant: false
  }
])

// 计算属性
const filteredNotices = computed(() => {
  let result = notices.value
  
  if (searchForm.value.keyword) {
    result = result.filter(notice => 
      notice.title.includes(searchForm.value.keyword) ||
      notice.content.includes(searchForm.value.keyword)
    )
  }
  
  if (searchForm.value.type) {
    result = result.filter(notice => notice.type === searchForm.value.type)
  }
  
  if (searchForm.value.status) {
    result = result.filter(notice => notice.status === searchForm.value.status)
  }
  
  if (searchForm.value.publishDate) {
    result = result.filter(notice => {
      if (!notice.publishTime) return false
      const publishDate = notice.publishTime.split(' ')[0]
      return publishDate === searchForm.value.publishDate
    })
  }
  
  return result.sort((a, b) => {
    // 置顶优先
    if (a.isTop && !b.isTop) return -1
    if (!a.isTop && b.isTop) return 1
    // 重要通知优先
    if (a.isImportant && !b.isImportant) return -1
    if (!a.isImportant && b.isImportant) return 1
    // 按发布时间排序
    return new Date(b.publishTime || 0) - new Date(a.publishTime || 0)
  })
})

const totalPages = computed(() => {
  return Math.ceil(filteredNotices.value.length / pageSize.value)
})

const paginatedNotices = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredNotices.value.slice(start, end)
})

const totalNotices = computed(() => notices.value.length)
const publishedNotices = computed(() => notices.value.filter(n => n.status === '已发布').length)
const draftNotices = computed(() => notices.value.filter(n => n.status === '草稿').length)
const totalViews = computed(() => notices.value.reduce((sum, notice) => sum + notice.views, 0))

// 方法
const getTypeClass = (type) => {
  switch (type) {
    case '重要通知':
      return 'bg-red-100 text-red-800'
    case '学术通知':
      return 'bg-blue-100 text-blue-800'
    case '生活通知':
      return 'bg-green-100 text-green-800'
    case '招生通知':
      return 'bg-purple-100 text-purple-800'
    case '就业通知':
      return 'bg-yellow-100 text-yellow-800'
    default:
      return 'bg-gray-100 text-gray-800'
  }
}

const getTypeColor = (type) => {
  switch (type) {
    case '重要通知':
      return 'bg-red-500'
    case '学术通知':
      return 'bg-blue-500'
    case '生活通知':
      return 'bg-green-500'
    case '招生通知':
      return 'bg-purple-500'
    case '就业通知':
      return 'bg-yellow-500'
    default:
      return 'bg-gray-500'
  }
}

const getStatusClass = (status) => {
  switch (status) {
    case '已发布':
      return 'bg-green-100 text-green-800'
    case '草稿':
      return 'bg-yellow-100 text-yellow-800'
    case '已下线':
      return 'bg-gray-100 text-gray-800'
    default:
      return 'bg-gray-100 text-gray-800'
  }
}

const handleSearch = () => {
  currentPage.value = 1
}

const handleReset = () => {
  searchForm.value = {
    keyword: '',
    type: '',
    status: '',
    publishDate: ''
  }
  currentPage.value = 1
}

const handleSelectAll = (event) => {
  if (event.target.checked) {
    selectedNotices.value = filteredNotices.value.map(notice => notice.id)
  } else {
    selectedNotices.value = []
  }
}

const handleAdd = () => {
  editingNotice.value = null
  noticeForm.value = {
    title: '',
    type: '',
    summary: '',
    content: '',
    isTop: false,
    isImportant: false,
    status: '草稿'
  }
  showEditModal.value = true
}

const handleEdit = (notice) => {
  editingNotice.value = notice
  noticeForm.value = {
    title: notice.title,
    type: notice.type,
    summary: notice.summary,
    content: notice.content,
    isTop: notice.isTop,
    isImportant: notice.isImportant,
    status: notice.status
  }
  showEditModal.value = true
}

const handleView = (notice) => {
  selectedNotice.value = notice
  // 增加浏览量
  notice.views++
  showViewModal.value = true
}

const handleSubmit = async () => {
  if (editingNotice.value) {
    // 编辑
    const index = notices.value.findIndex(n => n.id === editingNotice.value.id)
    if (index > -1) {
      notices.value[index] = {
        ...notices.value[index],
        ...noticeForm.value,
        publishTime: noticeForm.value.status === '已发布' ? new Date().toLocaleString('zh-CN') : notices.value[index].publishTime
      }
    }
    appStore.showNotification('通知更新成功', 'success')
  } else {
    // 新增
    const newNotice = {
      id: Date.now(),
      ...noticeForm.value,
      publishTime: noticeForm.value.status === '已发布' ? new Date().toLocaleString('zh-CN') : null,
      views: 0,
      publisher: '管理员'
    }
    notices.value.unshift(newNotice)
    appStore.showNotification('通知发布成功', 'success')
  }
  
  showEditModal.value = false
}

const handlePublish = async (notice) => {
  const index = notices.value.findIndex(n => n.id === notice.id)
  if (index > -1) {
    notices.value[index].status = '已发布'
    notices.value[index].publishTime = new Date().toLocaleString('zh-CN')
  }
  appStore.showNotification('通知发布成功', 'success')
}

const handleOffline = async (notice) => {
  if (confirm(`确定要下线通知 "${notice.title}" 吗？`)) {
    const index = notices.value.findIndex(n => n.id === notice.id)
    if (index > -1) {
      notices.value[index].status = '已下线'
    }
    appStore.showNotification('通知已下线', 'success')
  }
}

const handleDelete = async (notice) => {
  if (confirm(`确定要删除通知 "${notice.title}" 吗？此操作不可恢复。`)) {
    const index = notices.value.findIndex(n => n.id === notice.id)
    if (index > -1) {
      notices.value.splice(index, 1)
    }
    appStore.showNotification('通知删除成功', 'success')
  }
}

const handleBatchPublish = async () => {
  if (selectedNotices.value.length === 0) return
  
  selectedNotices.value.forEach(noticeId => {
    const index = notices.value.findIndex(n => n.id === noticeId)
    if (index > -1 && notices.value[index].status === '草稿') {
      notices.value[index].status = '已发布'
      notices.value[index].publishTime = new Date().toLocaleString('zh-CN')
    }
  })
  
  selectedNotices.value = []
  appStore.showNotification('批量发布成功', 'success')
}

const handleBatchDelete = async () => {
  if (selectedNotices.value.length === 0) return
  
  if (confirm(`确定要删除选中的 ${selectedNotices.value.length} 条通知吗？此操作不可恢复。`)) {
    selectedNotices.value.forEach(noticeId => {
      const index = notices.value.findIndex(n => n.id === noticeId)
      if (index > -1) {
        notices.value.splice(index, 1)
      }
    })
    
    selectedNotices.value = []
    appStore.showNotification('批量删除成功', 'success')
  }
}

const handleRefresh = () => {
  appStore.showNotification('数据已刷新', 'success')
}

// 生命周期
onMounted(() => {
  // 初始化数据
})
</script>